<template>
	<view class="BodyPage">
		<view class="OutBox">
			<showcard class="showcard"></showcard>
			<view class="RegistrationBox">
				<view class="ItemBoxTitle">
					就诊记录
					<u-line color="#757575" length="50%" margin="10upx auto 20upx" />
				</view>
				<scroll-view scroll-y="true" style="height: 680upx;">
					<view
						class="ItemBox"
						scroll-y="true"
						v-for="(registrationItem, registrationIndex) in RegistrationList"
						:key="registrationIndex"
						@click="showRegistrationDetails(registrationItem)"
					>
						<view class="department">{{ registrationItem.department }}</view>
						<view class="stateText">
							<view class="">{{ registrationItem.stateText }}</view>
							<view v-if="registrationItem.doctor">[{{ registrationItem.clinictime }}]</view>
							<view class="" v-else><u-count-down :timestamp="registrationItem.countdown"></u-count-down></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<mybox @myBoxFunction="myBoxFunction"></mybox>
		<pcitem v-if="showdetails" :cardid="vuex_cardInfo.cardid" :registrationId="registrationId" @closeFun="closeFun"></pcitem>
		<u-action-sheet :list="actionList" v-model="actionShow" @click="actionClick"></u-action-sheet>
	</view>
</template>

<script>
export default {
	data() {
		return {
			RegistrationList: [],
			actionShow: false,
			actionList: [
				{
					text: '急诊科'
				},
				{
					text: '五官科'
				},
				{
					text: '口腔科'
				},
				{
					text: '皮肤科'
				},
				{
					text: '精神科'
				}
			],
			showdetails: false,
			registrationId: ''
		};
	},
	onShow() {
		// console.log(new Date().getTime());
		this.getRegistrationList();
	},
	methods: {
		closeFun() {
			this.showdetails = false;
		},
		actionClick(index) {
			this.$u
				.post('/addRegistration/', {
					cardid: this.vuex_cardInfo.cardid,
					department: this.actionList[index].text
				})
				.then(res_addRegistration => {
					this.getRegistrationList();
				});
		},
		getRegistrationList() {
			this.RegistrationList = [];
			if (!('cardid' in this.vuex_cardInfo)) {
				return;
			}
			this.$u
				.get('/getRegistrationList/', {
					cardid: this.vuex_cardInfo.cardid
				})
				.then(res_getRegistrationList => {
					for (let i = 0; i < res_getRegistrationList.length; i++) {
						res_getRegistrationList[i].clinictime = res_getRegistrationList[i].clinictime.replace('T', ' ');
						if (res_getRegistrationList[i].doctor != null) {
							res_getRegistrationList[i].stateText = `${res_getRegistrationList[i].doctor}医生已为您就诊！`;
						} else {
							res_getRegistrationList[i].stateText = '等待就诊！';
							let countdown = 0;
							countdown = new Date(res_getRegistrationList[i].clinictime) - new Date().getTime();
							res_getRegistrationList[i].countdown = countdown / 1000;
							if (countdown > 0) {
								setTimeout(() => {
									this.getRegistrationList();
								}, countdown);
							}
						}
					}

					this.RegistrationList = res_getRegistrationList;
				});
		},
		delCard() {
			this.$u
				.get('/delCard/', {
					cardid: this.vuex_cardInfo.cardid
				})
				.then(res_delCard => {
					console.log(res_delCard);
					this.$u.vuex('vuex_cardInfo', {});
					this.getRegistrationList();
					this.$u.toast(`删除成功！`);
				});
		},
		myBoxFunction(index) {
			switch (index) {
				case 1:
					if ('cardid' in this.vuex_cardInfo) {
						console.log('退出登录');
						this.$u.vuex('vuex_cardInfo', {});
						this.getRegistrationList();
					} else {
						console.log('登录');
						this.$u.route('/pages/tabbar/login/login');
					}

					break;
				case 2:
					if (!('cardid' in this.vuex_cardInfo)) {
						return;
					}
					this.actionShow = true;
					break;
				case 3:
					this.getRegistrationList();
					break;
				case 4:
					if (!('cardid' in this.vuex_cardInfo)) {
						return;
					}
					this.delCard();
					break;
				default:
					break;
			}
		},
		showRegistrationDetails(registrationItem) {
			this.registrationId = registrationItem.id;
			this.showdetails = true;
		}
	}
};
</script>

<style lang="scss">
.BodyPage {
	position: relative;
	height: 100vh;
	background: linear-gradient(50deg, #f3c680, #a1e3e2);
}
.OutBox {
	top: 250upx;
	left: 5%;
	width: 90%;
	height: 78%;
	background-color: #000000;
	position: relative;
	background: white;
	border-radius: 15px;
	-webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	.showcard {
		position: absolute;
		top: -200upx;
	}
	.RegistrationBox {
		position: absolute;
		top: 200upx;
		width: 100%;
		height: 600upx;
		.ItemBoxTitle {
			width: 100%;
			text-align: center;
			margin: 30upx auto 0;
			color: #006a71;
			font-size: 25px;
			font-weight: 600;
			text-transform: uppercase;
		}
		.ItemBox {
			margin: 0 auto 5%;
			width: 90%;
			// height: 150upx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 30upx;
			font-size: 17px;
			border-radius: 15px;
			background-color: #77ffd7;
			.stateText {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}
}
</style>
